import React, { Component } from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {Link } from 'react-router';
import classnames from 'classnames';
import actions from "src/store/actions";
import {Svg,Empty} from "src/components/common";
import { Tab,Button,Scroll, StaticToast} from 'pjh-mobile-ui';
import { mBridge,mFormat,mFetch,minHistory} from 'min-bridge';

import './Enterprise.scss';

class Index extends Component{
	constructor(props){
		super(props);
		this.state = {
			draftType:(props.location.query.draftType||1),
			buy:{//购票
				pageNum:1,
				initFlag:false,
				openUp:false,
				flag:false
			},barter:{//换票
				pageNum:1,
				initFlag:false,
				openUp:false,
				flag:false
			},
			isRefresh:false
		}
		this.tab=this.tab.bind(this);
		this.getData=this.getData.bind(this);
	}
	componentWillReceiveProps(nextProps) {

		let prevProp = this.props.location.query;
		let nextProp = nextProps.location.query;

		let prevDraft = prevProp.draftType;
		let nextDraft = nextProp.draftType;
  	if(prevDraft!=nextDraft){
			__DEBUG__ && console.log(prevDraft,nextDraft)
  		this.setState({
				draftType: nextDraft||"1",
			},()=>{
				mBridge.doAction('setTitle', { title:`企业${nextDraft==2?'换':'购'}票`,type:'HOME'});
				let {_barterList,_buyList}=this.props;
				const activeList = nextDraft==2?_barterList:_buyList;
				this.getData((nextDraft==2?'barter':'buy'),'down',(activeList.length<=0?'':'special'));
			});
			
  	};
	}
	tab(index){
		minHistory.push({pathname:"/app/draft",query:{draftType:(index||1)}})
	}
	getData(type,direction,special){
		if(special&&special!=''){
			this.state[type].initFlag = true;
			this.setState({isRefresh:!this.state.isRefresh,[`${type}`]:this.state[type]});
			return false;
		};
		let {draftType} = this.state;
		if(this.state[type].flag){
			return false;
		}
		this.state[type].flag = true;
		this.setState({
			[`${type}`]:this.state[type]
		});
		if(direction == 'down'){
			this.state[type].pageNum = 1;
		};
		// console.log(draftType,45,)
		let {ACTIONS} = this.props;
		const params ={
			draftType,
			pageNum: direction == 'down' ? this.state[type].pageNum : ++this.state[type].pageNum, // 下拉时加载第一页
		};
		setTimeout(()=>{
			this.setState({
				[`${type}`]:this.state[type]
			});
		},0);
		return new Promise((resolve, reject)=>{
			return ACTIONS.draftList({
				params,
				success:res=>{
					this.state[type].flag = false;
					this.state[type].initFlag = true;
					// compelent&&compelent();
					if(res.code =="0000"){
						// this.state[type].openUp= res.data.totalPage > this.state[type].pageNum
					};
					if(this.state[type].pageNum<=1){
						this.setState({isRefresh:!this.state.isRefresh});
					};
					this.setState({
						[`${type}`]:this.state[type]
					});
					resolve();
				},error:err=>{
					this.state[type].flag = false;
					this.setState({
						[`${type}`]:this.state[type]
					});
					// compelent&&compelent()
					reject();
				}
			});
		});
		
	}
	render(){
		let {draftType,buy,barter,isRefresh}=this.state;
		let {_barterList,_buyList}=this.props;
		const activeList = draftType==2?_barterList:_buyList;
		const activeState = draftType==2?barter:buy;
		return (
			<div className="draft-home">
				<ul className="tab-header ds-box">
					<li className={classnames("th-item cm-flex",{"active":draftType==1})} onClick={()=>this.tab(1)}>
						<p><Svg className="icon" href={require('./images/svg-buy.svg')}/>企业购票</p>
					</li>
					<li className={classnames("th-item cm-flex",{"active":draftType==2})} onClick={()=>this.tab(2)}>
						<p><Svg className="icon" href={require('./images/svg-barter.svg')}/>企业换票</p>
					</li>
				</ul>
				<div className="tab-body">
					<section className="tab-body-item active">
						<Scroll  openDown={true} openUp={(draftType==2?barter.openUp:buy.openUp)} downFetch={(compelent)=>this.getData((draftType==2?'barter':'buy'),'down')}  upFetch={(compelent)=>this.getData((draftType==2?'barter':'buy'))} isRefresh={isRefresh}>
						<ul className={classnames("draft-list",{"barter":draftType==2})}>
						{
						!activeState.initFlag?(null):(
							activeList.length>0?(
								activeList.map((k,v)=>{
									let _hash = `svg-${k.draftType}-i${k.draftTag}.svg`;
									return (
										<li className="item" key={`${draftType}${v}`}>
											<Link className="item-link" to={{pathname:"/app/draft/detail",query:{draftType:k.draftType,draftId:k.draftId}}}>
												<h3 className="tit-3">
													<Svg className="icon" href={require(`../Component/images/${_hash}`)}/>
													{k.draftName}
												</h3>
												<div className="ds-box inner">
													<div className="cm-flex lightspot">
														<p className="line"><span className="val">{(mFormat.units(k.amount,' ')).trim()}</span>{k.amount<10000?'元':'万'}</p>
														<p className="weaken">票面金额</p>
													</div>
													{
													draftType==2?(
														<div className="cm-flex deadline">
															<p className="line">{k.dueDate}</p>
															<p className="weaken">最近到期日</p>
														</div>
													):(
														<div className="cm-flex deadline">
															<p className="line"><span className="val">{k.residueDay}</span>天</p>
															<p className="weaken">剩余天数</p>
														</div>
													)
													}
													<p className="flex-y">
														<Button size="xs" bordered theme="info" round>查看</Button>
													</p>
												</div>
											</Link>
										</li>
									);
								})
							):(<Empty />)
						)
						}
						</ul>
						</Scroll>
					</section>
				</div>
			</div>
		)
	}
}

let mapStateToProps=(state)=>{
	let {barter,buy} = state.draftList;
	console.log(state.draftList)
	return {
		_barterList:barter,
		_buyList:buy
	};
};
let mapDispatchToProps=(dispatch)=>{
	return {
		ACTIONS:bindActionCreators(actions,dispatch)
	};
};
export default connect(mapStateToProps,mapDispatchToProps)(Index);